<template>
  <div class="list">
    <!-- 这里面来做列表 一次返回一条 -->
    <Dynamic_detailVue
      v-for="i in dynamics"
      :key="i.id"
      :id="i.id"
      :title="i.title"
      :introduce="i.context"
      :author="i.username"
      :like="i.likes"
      :comment="i.comment.length"
      :date="time(i.time)"
      :comments="i.comments"
      :tag="JSON.parse(JSON.parse(i.tag))"
      :likeusers = "i.likeusers"
      :icon = "i.icon"
    />

    <FooterVue id="Foot" :context="footerTip" />
  </div>
</template>

<script>
import Dynamic from "../api/GetDynamic";
import Dynamic_detailVue from "../re_components/Dynamic_detail.vue";
import FooterVue from "../re_components/Footer.vue";
import { time } from "../utils/time";
export default {
  name: "Dynamic_list",
  components: { FooterVue, Dynamic_detailVue },
  data() {
    return {
      interval: "",
      footerTip: "加载中~~",
    };
  },
  props: {
    dynamics: {},
  },
  methods: {
    time,
  },
  mounted() {
    let dynamic = JSON.parse(sessionStorage.getItem("dynamic"));
    console.log(dynamic)
    if (dynamic) {
      this.$store.commit("initDynamic", dynamic);
      this.$store.commit(
        "setDynamicId",
        JSON.parse(sessionStorage.getItem("dynamic_id"))
      );
    }
    this.interval = setInterval(() => {
      // 博客列表滑动至底加载
      const pageHeight = document.documentElement.clientHeight;
      let el = document.getElementById("Foot");
      const contentTop = el.getBoundingClientRect().top;
      const contentHeight = el.offsetHeight;
      if (
        (contentTop < pageHeight && contentTop >= 0) ||
        (contentTop < 0 && contentTop + contentHeight > 0)
      ) {
        if (!this.$store.state.CommentFinish) {
          const params = new URLSearchParams();
          params.append("page", this.$store.state.dynamic_id);
          Dynamic(params).then((res) => {
            console.log(res.data);
            if (res.data.infomation.length !== 0) {
              this.$store.commit("addDynamic", res.data.infomation);
              sessionStorage.setItem(
                "dynamic",
                JSON.stringify(this.$store.state.dynamics)
              );
              sessionStorage.setItem(
                "dynamic_id",
                JSON.stringify(this.$store.state.dynamic_id)
              );
            } else {
              this.$store.commit("CommentFinish");
              this.footerTip = "我是有底线的哦~~";
            }
          });
        }
      }
    }, 2000);
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
};
</script>

<style lang="less" scoped>
@import "../main.less";

.list {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  overflow: auto;
  /*IE下隐藏滚动条*/
  // -ms-overflow-style: none;
  // /*火狐下隐藏滚动条*/
  // overflow: -moz-scrollbars-none;
  // scrollbar-width: none;
}

.contain .main {
  overflow: auto;
}
</style>